<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
<style rel="stylesheet" type="text/css">
.overlabel {
	position: absolute;
}
.overlabel label {
	position: absolute;
	top: 6px;
	left: 3px;
	color: #999;
	cursor: text;
}
ul.autocomplete {
	list-style: none;
}
ul.autocomplete li {
	border: 1px green dashed;
}
.selected {
	background-color: lightblue;
}
</style>
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script>
$(document).ready(function() {
// 字段的占位符文本
	var $search = $('#search').addClass('overlabel');
	var $searchInput = $search.find('input');
	var $searchLabel = $search.find('label');
	if ($searchInput.val())
	{
		$searchLabel.hide();
	}
	$searchInput.focus(function() {
		$searchLabel.hide();
	}).blur(function() {
		if (this.value == '')
		{
			$searchLabel.show();
		}
	});
	
	// ajax 自动完成
	var $autocomplete = $('<ul class="autocomplete"></ul>').hide().insertAfter('#search-text');
	$('#search-text').attr('autocomplete', 'off').keyup(function(event) {
		if (event.keyCode > 40 || event.keyCode == 8)
		{
			$.ajax({
				'url': 'data.php',
				'data': {'search-text': $('#search-text').val()},
				'dataType': 'json',
				'type': 'GET',
				'success': function(data, status) {
					if (data.length)
					{
						$autocomplete.empty();
						$.each(data, function(index, term) {
							$('<li></li>').text(term).appendTo($autocomplete).mouseover(function() {
								setSelectedItem(index);
							}).click(function() {
								$('#search-text').val(term);
								$autocomplete.hide();
							});
						});
						setSelectedItem(0);
						$autocomplete.show();
					}
					else
					{
						setSelectedItem(null);
					}
				}
			});
		}
		else if (event.keyCode == 38 && selectedItem !== null)
		{
			setSelectedItem(selectedItem - 1);
			event.preventDefault();
		}
		else if (event.keyCode == 40 && selectedItem !== null)
		{
			setSelectedItem(selectedItem + 1);
			event.preventDefault();
		}
		else if (event.keyCode == 27 && selectedItem !== null)
		{
			setSelectedItem(null);
		}
	});
	
	$('#search-text').blur(function(event) {
		setTimeout(function() {
			setSelectedItem(null);
		}, 250);
	});
	
	// 键盘导航
	var selectedItem = null;
	var setSelectedItem = function(item) {
		selectedItem = item;
		if (selectedItem === null)
		{
			$autocomplete.hide();
			return;
		}
		if (selectedItem < 0)
		{
			selectedItem = 0;
		}
		if (selectedItem >= $autocomplete.find('li').length)
		{
			selectedItem = $autocomplete.find('li').length - 1;
		}
		$autocomplete.find('li').removeClass('selected').eq(selectedItem).addClass('selected');
		$autocomplete.show();
	};
	// 回车插入数据
	var populateSearchField = function() {
		$('#search-text').val($autocomplete.find('li').eq(selectedItem).text());
		setSelectedItem(null);
	};
	$('#search-text').keypress(function(event) {
		if (event.keyCode == 13 && selectedItem !== null)
		{
			populateSearchField();
			event.preventDefault();
		}
	});
});
</script>
</head>
<body>
  <form id="search" action="#" method="get">
   <label for="search-text">search the site</label>
   <input type="text" name="search-text" id="search-text" />
  </form>
</body>
</html>